<template>
  <div class="show-line">
    <div style="width: 80%; height: 350px;" ref="box"></div>
  </div>
</template>

<script>
// 引入图表的内容
// import * as echarts from 'echarts'
import option from './option.js'
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    initLine() {
      // 1.0 初始化实例
      const myChart = this.$echarts.init(this.$refs.box)
      // 2.0 配置options对象
      option.xAxis.data = this.info.xData
      option.series[0].data = this.info.amountData
      option.series[1].data = this.info.orderData
      // 3.0 调用render函数
      myChart.setOption(option)
    }
  },
  watch: {
    info: {
      handler() {
        this.initLine()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.show-line {
  background-color: #fff;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
}
</style>
